<template>
  <div>
    <el-card>
      <div class="box">
        <div>
          <img
            :src="useUserStore.avatar"
            alt=""
            style="width: 150px; height: auto; border-radius: 50%"
          />
        </div>
        <div class="box2">
          <h1 style="margin-bottom: 10px" class="unselectable">
            {{ getTime() }} {{ useUserStore.username }}
          </h1>
          <span class="unselectable">{{ title.title }}</span>
        </div>
      </div>
    </el-card>
    <svg-icon
      name="welcome"
      style="width: 380px; height: auto; margin-left: 250px"
    ></svg-icon>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import userStore from '../../store/modules/user'
import getTime from '../../utils/time'
import title from '../../setting/setting'
const useUserStore = userStore()
onMounted(() => {
  useUserStore.getUserInfo()
})
</script>

<style scoped lang="scss">
.box {
  display: flex;
  .box2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 20px;
  }
}
</style>
